<template>
  <el-aside width="210px">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#fff"
      text-color="#222"
      :default-active="this.$route.path"
    >
      <el-menu-item index="0" @click="firstGo">
        <template slot="title">
          <i class="el-icon-house"></i>
          <span slot="title">首页</span>
        </template>
      </el-menu-item>
      <el-submenu
        v-for="(menu, index) in menuList"
        :index="menu.name"
        :key="index"
        :default-active="activeMenu"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.title }}</span>
        </template>
        <router-link
          v-for="item in menu.children"
          :to="item.path"
          :key="item.id"
        >
          <el-menu-item :index="item.name" @click="go(item)">
            <template slot="title">
              <span :class="item.icon"></span>
              <span slot="title">{{ item.title }}</span>
            </template>
          </el-menu-item>
        </router-link>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          id: "1",
          title: "用户管理",
          name: "user",
          icon: "el-icon-user",
          path: "",
          children: [
            {
              id: "2",
              title: "用户列表",
              name: "userlist",
              icon: "el-icon-arrow-right",
              path: "/userlist",
            },
            {
              id: "3",
              title: "专业、班级与用户设置",
              name: "usersetting",
              icon: "el-icon-arrow-right",
              path: "/usersetting",
            },
          ],
        },
        {
          id: "4",
          title: "管理员管理",
          name: "admin",
          icon: "el-icon-s-custom",
          path: "",
          children: [
            {
              id: "5",
              title: "管理员列表",
              name: "adminlist",
              icon: "el-icon-arrow-right",
              path: "/adminlist",
            },
          ],
        },
        {
          id: "6",
          title: "综合测评信息记录",
          name: "record",
          icon: "el-icon-folder",
          path: "",
          children: [
            {
              id: "7",
              title: "查看所有信息",
              name: "allinfo",
              icon: "el-icon-arrow-right",
              path: "/allinfo",
            },
            {
              id: "8",
              title: "信息审核",
              name: "infoexamine",
              icon: "el-icon-arrow-right",
              path: "/infoexamine",
            },
          ],
        },
        {
          id: "10",
          title: "帮助",
          name: "help",
          icon: "el-icon-thumb",
          path: "",
          children: [
            {
              id: "5",
              title: "使用说明",
              name: "helper",
              icon: "el-icon-arrow-right",
              path: "/helper",
            },
          ],
        },
      ],
    };
  },
  methods: {
    go(item) {
      // console.log(item);
      this.$store.commit("addTab", item);
    },
    firstGo() {
      this.$router.push({ name: "index" });
    },
  },
  created() {
    this.firstGo();
  },
  computed: {
    activeMenu() {
      return this.$store.state.editableTabsValue;
    },
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}
span {
  font-size: 0.5rem;
}
.el-aside {
  overflow-y: auto;
  color: #333;
  line-height: 200px;
  .el-menu {
    height: 100vh;
  }
  .el-icon-arrow-right {
    font-size: 0.3rem;
  }
  .el-submenu .el-menu-item {
    margin-left: -5%;
  }
}
.el-aside::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.el-aside::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); 
  background: #c4b8b8;
}
.el-aside::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
  border-radius: 10px;
  background: #fff;
}
</style>